<template>
  <v-card flat height="660" class="pl-4 pr-4">
    <v-row class="align-center mt-5" no-gutters>
      <v-col cols="3">
        <v-text-field
          v-model="search"
          class="gray-input"
          placeholder="Search Keyword"
          solo
          hide-details
          append-outer-icon="mdi-magnify"
        ></v-text-field
      ></v-col>
    </v-row>
    <div class="table-wrap">
      <v-skeleton-loader
        v-if="loading"
        height="100%"
        tile
        type="list-item@20"
      ></v-skeleton-loader>
      <v-data-table
        v-else
        v-model="selectedSynced"
        :headers="headers"
        :items="items"
        :search="search"
        item-key="id"
        show-select
        class="elevation-0"
        hide-default-footer
      >
        <template #[`header.data-table-select`]="slotData">
          <div class="d-flex align-center">
            <v-checkbox
              v-model="slotData.props.value"
              @click="slotData.on.input"
              @change="changAllCheck"
              :indeterminate="slotData.props.indeterminate"
              class="mt-0 pt-0"
              hide-details
            ></v-checkbox>
            <p class="ma-0 all">All</p>
          </div>
        </template>
        <template #[`item.data-table-select`]="slotData">
          <v-checkbox
            v-model="slotData.isSelected"
            @change="changeCheck(slotData.isSelected, slotData.select)"
            class="mt-0 pt-0"
            hide-details
          ></v-checkbox>
        </template>
      </v-data-table>
    </div>
  </v-card>
</template>
<script lang="ts">
import { Vue, Component, PropSync } from "vue-property-decorator";
import { IServiceContractItem } from "@/components/Customer/index";
@Component({
  components: {},
})
export default class AddItem extends Vue {
  @PropSync("selected", { type: Array, default: () => [] })
  selectedSynced!: IServiceContractItem[];
  // table
  loading = false;
  search = "";
  headers = [
    { text: "Item #", value: "itemNumber" },
    { text: "Cate Code", value: "cateCode" },
    { text: "Item Description", value: "itemDescription" },
    { text: "Cost", value: "cost" },
    { text: "Date Expire", value: "dateExpire" },
  ];
  items: IServiceContractItem[] = [];
  getItems() {
    this.loading = true;
    setTimeout(() => {
      this.items = [
        {
          id: "1",
          itemNumber: "BM0001",
          cateCode: "PT",
          alias: "",
          locationCode: "Office",
          itemDescription: "Painting",
          serialNumber: "0001 ab",
          QTY: "1",
          cost: "50.00",
          dateExpire: "2022-09-06",
        },
        {
          id: "2",
          itemNumber: "ELEV 200",
          cateCode: "ELEV",
          itemDescription: "Elevator 200 steps",
          alias: "",
          locationCode: "Office2",
          serialNumber: "EL2378200",
          QTY: "1",
          cost: "8,000.00",
          dateExpire: "2022-09-06",
        },
        {
          id: "3",
          itemNumber: "ELEV 230",
          cateCode: "ELEV",
          itemDescription: "Elevator 230 steps",
          alias: "",
          locationCode: "Office3",
          serialNumber: "EL412378",
          QTY: "1",
          cost: "12,000.00",
          dateExpire: "2022-09-06",
        },
        {
          id: "4",
          itemNumber: "ELEV 260",
          cateCode: "ELEV",
          itemDescription: "Escalator",
          alias: "",
          locationCode: "Office4",
          serialNumber: "ELda8a234f",
          QTY: "1",
          cost: "10,000.00",
          dateExpire: "2022-09-06",
        },
        {
          id: "5",
          itemNumber: "LIFT 3CBM",
          cateCode: "LIFT",
          itemDescription: "Lift 3 CBM",
          alias: "",
          locationCode: "Office5",
          serialNumber: "LIf8a2",
          QTY: "1",
          cost: "25,000.00",
          dateExpire: "2022-09-06",
        },
        {
          id: "6",
          itemNumber: "LIFT 5CBM",
          cateCode: "LIFT",
          itemDescription: "Lift 5 CBM",
          alias: "",
          locationCode: "Office6",
          serialNumber: "LIs7f4",
          QTY: "12",
          cost: "28,000.00",
          dateExpire: "2022-09-06",
        },
        {
          id: "7",
          itemNumber: "SW11",
          cateCode: "SW",
          itemDescription: "Toilet Bowl",
          alias: "",
          locationCode: "Office1",
          serialNumber: "SW487",
          QTY: "1",
          cost: "100.00",
          dateExpire: "2022-09-06",
        },
      ];
      this.loading = false;
    }, 1200);
  }
  // check
  changeCheck(isSelected: boolean, select: (value: boolean) => void) {
    select(isSelected);
  }
  changAllCheck(status: boolean) {
    if (status === false) {
      this.selectedSynced = [];
    }
  }

  created() {
    this.getItems();
  }
}
</script>
<style lang="scss" scoped>
@import "@/components/Customer/Dialog/AddItem/AddItem.scss";
</style>
